<template>
	<div class="body">
		<div style="height: 66px"></div>
		<div class="container">
			<div class="tools-body">
        <div class="tools-box">
          <div class="tools-cate">十六进制字符串 bytes互转</div>
          <div class="row-j-box">
            <el-input type="textarea" style="margin-top: 10px" placeholder="十六进制字符串: 5A5AFF000B0CDD" v-model="formData.hex_str"></el-input>
            <el-input type="textarea" style="margin-top: 10px" placeholder="bytes数组空格隔开: 90 90 255 0 11 12 221" v-model="formData.bytes_str"></el-input>

            <el-select v-model="formData.split_value" size="mini" style="width: 120px">
              <el-option v-for="(item,index) in split_list" :label="item.name" :value="item.value" :key="index"></el-option>
            </el-select>
            <el-button size="mini" style="margin-top: 10px" @click="hex2bytes">转换</el-button>
            <el-button size="mini" style="margin-top: 10px" @click="bytes2hex">反转</el-button>
            <p style="color: red">
              {{formData.message1}}
            </p>
          </div>
        </div>
				<div class="tools-box" v-for="(item,index) in toolsList" :key="index">
					<div class="tools-cate">{{item.cate_name}}</div>
					<div class="tools-list">
						<div class="tools-item" v-for="(tool,t_index) in item.list" :key="t_index" @click="toNewPage(tool.url)">
							<div class="tools-icon" :style="'background-image:url(\''+tool.pic+'\')'"></div>
							<div class="link">{{tool.name}}</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>
<script>
import {defineComponent} from "vue"
export default defineComponent({name:'tools'})
</script>
<script setup>
import {useStore} from "vuex";
import {onActivated, onUnmounted, reactive, ref} from "vue";
import {ElButton,ElInput,ElMessage,ElSelect,ElOption} from "element-plus";
import router from "../router";
import Methods from "../utils/Methods";
const store = useStore()

const split_list = ref([
  {name:"空格",value:" "},
  {name:"逗号",value:","},
])
const formData = reactive({
  hex_str: "",
  bytes_str: "",
  split_value: " ",
  message1: "",
})

const hex2bytes = () => {
  if(!formData.hex_str) {
    formData.message1 = "请输入16进制字符串"
    return
  }
  let str = formData.hex_str.replaceAll(" ","")
  if(!Methods.validateHexString(str)) {
    formData.bytes_str = ""
    formData.message1 = "无效的16进制字符串"
    return
  }
  let arr = Methods.hexToBytes(str)
  formData.bytes_str = arr.join(formData.split_value)
}

const bytes2hex = () => {
  if(!formData.bytes_str) {
    formData.message1 = "请输入bytes数组"
    return
  }
  let n_arr = formData.bytes_str.split(formData.split_value)
  // console.log("n_arr",n_arr)
  let bytes = []
  for(let item of n_arr) {
    if(/^([0-9]+)$/.test(item) === false) {
      formData.hex_str = ""
      formData.message1 = "bytes字符串中包含无效数字"
      return
    }
    let v = parseInt(item)
    // console.log("v = ",v)
    if(isNaN(v) || v < 0 || v>255) {
      formData.hex_str = ""
      formData.message1 = "bytes字符串中包含无效数字"
      return
    }
    bytes.push(v)
  }
  let str = Methods.bytesToHex(bytes)
  formData.hex_str = str.toUpperCase()
}

const toolsList = ref([
  {
    cate_name: '图片处理',
    list: [
      {
        name: '图片压缩',
        url: 'https://docsmall.com/image-compress',
        pic: 'https://sekiro.oss-cn-beijing.aliyuncs.com/static/tools/docsmall.png',
      }
    ]
  },
  {
    cate_name: '远程操控',
    list: [
      {
        name: '向日葵',
        url: 'https://sunlogin.oray.com/',
        pic: 'https://sekiro.oss-cn-beijing.aliyuncs.com/static/tools/sunlogin.jpg',
      },
      {
        name: 'Teamviewer',
        url: 'https://www.teamviewer.cn/cn/',
        pic: 'https://sekiro.oss-cn-beijing.aliyuncs.com/static/tools/teamviewer.jpg',
      }
    ]
  },
  {
    cate_name: 'B站视频下载',
    list: [
      {
        name: 'JJdown',
        url: 'https://www.jijidown.com/',
        pic: 'https://sekiro.oss-cn-beijing.aliyuncs.com/static/tools/jjdown.jpg'
      },
      {
        name: '贝贝の站',
        url: 'https://xbeibeix.com/',
        pic: 'https://sekiro.oss-cn-beijing.aliyuncs.com/static/tools/beibei.png'
      }
    ]
  },
  // {
  // 	cate_name: '磁力下载',
  // 	list: [
  // 		{
  // 			name: '磁力猫',
  // 			url: 'https://xn--tfrs17es0d.com/',
  // 			pic: 'https://sekiro.oss-cn-beijing.aliyuncs.com/static/tools/muerbt.png'
  // 		}
  // 	]
  // },
  {
    cate_name: '工具资源库',
    list: [
      {
        name: '不死鸟',
        url: 'https://iao.su/',
        pic: 'https://sekiro.oss-cn-beijing.aliyuncs.com/static/tools/businiao.png'
      },
      {
        name: 'docsmall',
        url: 'https://docsmall.com',
        pic: 'https://sekiro.oss-cn-beijing.aliyuncs.com/static/tools/docsmall.png',
      },
      {
        name: 'Miku-tools',
        url: 'https://tools.miku.ac/',
        pic: 'https://sekiro.oss-cn-beijing.aliyuncs.com/static/tools/miku.png',
      }
    ]
  }
])

const toNewPage = (href) => {
	window.open(href , '_blank');
}

onActivated(() => {
	store.commit("setHeaderTab",3)
})
onUnmounted(() => {
	// console.log('onUnmounted tools')
})
</script>

<style scoped lang="scss">
.body {
  font-size: 14px;
}
.tools-body {
	width: 100%;
	background-color: rgba(255,255,255,0.8);
	box-shadow: 0 3px 7px 0 rgb(255 255 255 / 35%);
	box-sizing: border-box;
	margin-top: 100px;
	padding: 30px 15px;
	.tools-cate {
		font-size: 18px;
		font-weight: bold;
	}
	.tools-list {
		display: flex;
		flex-wrap: wrap;
		padding: 15px;
		.tools-item {
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			cursor: pointer;
			margin: 0 15px;
			.tools-icon {
				width: 50px;
				height: 50px;
				border-radius: 50%;
				background-position: center center;
				background-size: cover;
				margin-bottom: 15px;
			}
		}
	}
}

.row-j-box {
  padding: 15px;
}
</style>
